<template>
  <el-carousel type="card" height="300px" initial-index="3">
    <el-carousel-item v-for="(item, index) in imgs" :key="'img' + index">
      <el-image :src="item" fit="cover" />
    </el-carousel-item>
  </el-carousel>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="title" label="楼层" width="auto" />
    <el-table-column prop="price" label="价格(平方米)" width="auto" />
    <el-table-column prop="type" label="房源类型" width="auto" />
    <el-table-column prop="num" label="剩余房量" width="auto" />
  </el-table>
</template>


<script  setup lang="ts">
import { ref } from "vue";
import link from "../../api/link";
import url from "../../api/urls";
interface User {
  title: string;
  price: string;
  type: string;
  num: string;
}
const tableData = ref<User[]>([]);
//轮播图的图片
const imgs = ref([]);

//发送图片请求
(async () => {
  link(url.showing).then((res: any) => {
    // console.log(res.data[0].imgs);
    imgs.value = res.data.imgs;
    tableData.value = res.data.house;
  });
})();
</script>




<style >
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
